import { createElement, useState, useEffect } from 'rax';
import { isWeex } from 'universal-env';

import './index.css';

const safeAreaInsetBottom = getSafeAreaInsetBottom();

/**
 * Get the safe area inset bottom
 * @return {number} bottom in rpx
 */
function getSafeAreaInsetBottom() {
  try {
    let screenHeight = (window as any).screen.height;
    if (isWeex) {
      // W3C: window.screen.height return the height in CSS pixels
      // WEEX: window.screen.height return the height in device independent pixels
      screenHeight =
        (window as any).screen.height / (window as any).devicePixelRatio;
    }

    // 2018 iPhoneX: 812 × 375, iPhoneXS: 812 × 375, iPhone XS Max: 896 × 414, iPhone XR: 896 × 414
    // 2019 iPhone11: 896 x 414, iPhone11 Pro: 812 × 375, iPhone11 Pro Max: 896 × 414
    // Is iPhone and points min-height is 812 can be identified as the 2018 and 2019 iPhone models.
    if (
      /iphone/gi.test((window as any).navigator.userAgent) &&
      screenHeight >= 812
    ) {
      // Adapt bottom "Home Indicator".
      return 34;
    } else {
      return 0;
    }
  } catch (e) {
    return 0;
  }
}

export default function TabBar(props) {
  const { config, onClick, currentPageName } = props;
  const {
    backgroundColor = '#FFF',
    items = [],
    selectedColor = '#333',
    textColor = '#666',
  } = config || {};
  const [selectedName, setSelectedName] = useState(currentPageName);
  const handleTabItemClick = (item) => {
    setSelectedName(item.pageName);
    onClick(item);
  };
  useEffect(() => {
    setSelectedName(currentPageName);
  }, [currentPageName]);
  // TabBar default height is 98rpx
  return (
    <div
      className="rax-app-tab-bar"
      style={{ backgroundColor, height: 98 + safeAreaInsetBottom }}
    >
      {items.map((item, index) => {
        const itemTextColor = item.textColor || textColor;
        const itemSelectedColor = item.selectedColor || selectedColor;
        const selected = selectedName === item.pageName;
        if (process.env.NODE_ENV === 'development' && item.name) {
          console.error(
            'Please use text field instead of name in tabBar items config!'
          );
        }
        return (
          <div
            key={`tab-${index}`}
            className="rax-app-tab-bar-item"
            style={{
              height: 98 + safeAreaInsetBottom,
              paddingBottom: safeAreaInsetBottom,
            }}
            onClick={() => handleTabItemClick(item)}
          >
            {item.activeIcon && selected ? (
              <img
                className="rax-app-tab-bar-item-img"
                alt=""
                src={item.activeIcon}
              />
            ) : null}
            {item.icon && !selected ? (
              <img
                className="rax-app-tab-bar-item-img"
                alt=""
                src={item.icon}
              />
            ) : null}
            <span
              className="rax-app-tab-bar-item-text"
              style={{ color: selected ? itemSelectedColor : itemTextColor }}
            >
              {item.text || item.name}
            </span>
          </div>
        );
      })}
    </div>
  );
}
